<template>
	<view class="view">
		<view class="view_ss">
			<view class="view_ss_input">
				<input type="text" placeholder="输入商品名称或有关信息">
			</view>
			<view @click="tc_tj()" class="view_input_ss">
				<image class="view_input_ss_tu" src="../../static/image/search.png" mode=""></image>
			</view>
		</view>
		<view class="view_sp">
			<view class="view_sp_db">
				<view @click="view_db_dj(1)" class="view_sp_db_x" :class="{'view_sp_db_x_b':select1}">
					<image class="view_sptu" src="../../static/image/vegetable.png" mode=""></image>
					<view>蔬菜区</view>
				</view>
				<view @click="view_db_dj(2)" class="view_sp_db_x" :class="{'view_sp_db_x_b':select2}">
					<image class="view_sptu" src="../../static/image/fruits.png" mode=""></image>
					<view>水果区</view>
				</view>
				<view @click="view_db_dj(3)" class="view_sp_db_x" :class="{'view_sp_db_x_b':select3}">
					<image class="view_sptu" src="../../static/image/meat.png" mode=""></image>
					<view>肉质蛋类</view>
				</view>
				<view @click="view_db_dj(4)" class="view_sp_db_x" :class="{'view_sp_db_x_b':select4}">
					<image class="view_sptu" src="../../static/image/drinks.png" mode=""></image>
					<view>酒水饮料</view>
				</view>
			</view>
			<view v-show="xx[0].select" class="view_spfl">
				<view class="view_spfl_c">
					<block v-for="x1 in xx1" :key="x1.id">
						<view @click="view_db_dj1(x1.id)" class="view_sp_db_x1" :class="{'view_sp_db_x_b1':x1.select}">
							{{x1.text}}
						</view>
					</block>
				</view>
				<view class="view_spfl_x">
					<view v-show="xx1[0].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx1[1].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx1[2].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx1[3].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
				</view>
			</view>
			<view v-show="xx[1].select" class="view_spfl">
				<view class="view_spfl_c">
					<block v-for="x1 in xx2" :key="x1.id">
						<view @click="view_db_dj2(x1.id)" class="view_sp_db_x1" :class="{'view_sp_db_x_b1':x1.select}">
							{{x1.text}}
						</view>
					</block>
				</view>
				<view class="view_spfl_x">
					<view v-show="xx2[0].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx2[1].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx2[2].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx2[3].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
				</view>
			</view>
			<view v-show="xx[2].select" class="view_spfl">
				<view class="view_spfl_c">
					<block v-for="x1 in xx3" :key="x1.id">
						<view @click="view_db_dj3(x1.id)" class="view_sp_db_x1" :class="{'view_sp_db_x_b1':x1.select}">
							{{x1.text}}
						</view>
					</block>
				</view>
				<view class="view_spfl_x">
					<view v-show="xx3[0].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx3[1].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx3[2].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx3[3].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
				</view>
			</view>
			<view v-show="xx[3].select" class="view_spfl">
				<view class="view_spfl_c">
					<block v-for="x1 in xx4" :key="x1.id">
						<view @click="view_db_dj4(x1.id)" class="view_sp_db_x1" :class="{'view_sp_db_x_b1':x1.select}">
							{{x1.text}}
						</view>
					</block>
				</view>
				<view class="view_spfl_x">
					<view v-show="xx4[0].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx4[1].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx4[2].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
					<view v-show="xx4[3].select" class="view_spfl_xx">
						<spzj></spzj>
						<spzj></spzj>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import spzj from "../../pages/test1/test1.vue"

	export default {
		data() {
			return {
				dl_user_id: "",
				dl_pand: false,
				view_xx_tx: "",
				select1: true,
				select2: "",
				select3: "",
				select4: "",
				xx: [{
						id: 1,
						text: "春季菜品抢鲜尝",
						select: true
					},
					{
						id: 2,
						text: "慢火炖煮好汤",
						select: false
					},
					{
						id: 3,
						text: "酒水饮料",
						select: false
					},
					{
						id: 4,
						text: "休闲零食",
						select: false
					}
				],
				xx1: [{
						id: 1,
						text: "春季菜品抢鲜尝",
						select: true
					},
					{
						id: 2,
						text: "慢火炖煮好汤",
						select: false
					},
					{
						id: 3,
						text: "凉菜类",
						select: false
					},
					{
						id: 4,
						text: "汤菜",
						select: false
					}
				],
				xx2: [{
						id: 1,
						text: "草莓/芒果",
						select: true
					},
					{
						id: 2,
						text: "热带水果",
						select: false
					},
					{
						id: 3,
						text: "果切礼盒",
						select: false
					},
					{
						id: 4,
						text: "苹果香蕉梨",
						select: false
					}
				],
				xx3: [{
						id: 1,
						text: "特色干锅",
						select: true
					},
					{
						id: 2,
						text: "冬季火锅",
						select: false
					},
					{
						id: 3,
						text: "自助烧烤",
						select: false
					},
					{
						id: 4,
						text: "炒饭/盖饭类",
						select: false
					}
				],
				xx4: [{
						id: 1,
						text: "啤酒",
						select: true
					},
					{
						id: 2,
						text: "白酒",
						select: false
					},
					{
						id: 3,
						text: "豆奶椰汁",
						select: false
					},
					{
						id: 4,
						text: "葡萄酒/其他酒类",
						select: false
					}
				]
			}
		},
		components: {
			spzj
		},
		methods: {
			view_db_dj(id) {
				this.xx.forEach(x => {
					x.select = false
					if (x.id == id) x.select = true
				})
				if (id == 1) {
					this.select1 = true,
						this.select2 = false,
						this.select3 = false,
						this.select4 = false
				}
				if (id == 2) {
					this.select1 = false,
						this.select2 = true,
						this.select3 = false,
						this.select4 = false
				}
				if (id == 3) {
					this.select1 = false,
						this.select2 = false,
						this.select3 = true,
						this.select4 = false
				}
				if (id == 4) {
					this.select1 = false,
						this.select2 = false,
						this.select3 = false,
						this.select4 = true
				}
			},
			view_db_dj1(id) {
				this.xx1.forEach(x1 => {
					x1.select = false
					if (x1.id == id) x1.select = true
				})
			},
			view_db_dj2(id) {
				this.xx2.forEach(x1 => {
					x1.select = false
					if (x1.id == id) x1.select = true
				})
			},
			view_db_dj3(id) {
				this.xx3.forEach(x1 => {
					x1.select = false
					if (x1.id == id) x1.select = true
				})
			},
			view_db_dj4(id) {
				this.xx4.forEach(x1 => {
					x1.select = false
					if (x1.id == id) x1.select = true
				})
			},
			tc_wd() {
				this.$refs.popup.open("top")
			},
			tc_tj() {
				this.$refs.popup1.open("right")
			},
			sz_grxx() {
				uni.navigateTo({
					url: "/pages/wd/sz/sz_grxx"
				})
			},
			view_xx_tx_djdl() {
				if (this.dl_pand == false) {
					uni.navigateTo({
						url: "/pages/dl_zc/dl"
					})
				} else {
					uni.navigateTo({
						url: "/pages/wd/sz/sz_grxx"
					})
				}
			},
		}
	}
</script>

<style>
	.view_ss {
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		background-color: #FFD900;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.view_ss_input {
		width: 90%;
		height: 60rpx;
		border-radius: 80rpx;
		background-color: #ffffff;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.view_input_ss {
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(255, 255, 255, 0);
		border-radius: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		outline: none;
	}

	.view_input_ss_tu {
		width: 60rpx;
		height: 60rpx;
	}

	.view_sp {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.view_sp_db {
		width: 718rpx;
		height: 140rpx;
		background-color: #ffffff;
		border-radius: 80rpx;
		color: #000000;
		font-size: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.view_sp_db_x {
		width: 180rpx;
		height: 140rpx;
		font-size: 25rpx;
		border-radius: 80rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.view_sptu {
		width: 70rpx;
		height: 70rpx;
	}

	.view_sp_db_x_b {
		background-color: rgba(255, 217, 0, 0.6);
	}

	.view_spfl {
		width: 750rpx;
		height: 1000rpx;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between
	}

	.view_spfl_c {
		width: 140rpx;
		height: 1000rpx;
		background: linear-gradient(#ffffff, rgba(212, 212, 212, 0));
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.view_sp_db_x1 {
		width: 140rpx;
		height: 80rpx;
		font-size: 25rpx;
		display: flex;
		align-items: center;
	}

	.view_sp_db_x_b1 {
		background-color: #bababa;
		font-size: 30rpx;
	}

	.view_spfl_x {
		width: 610rpx;
		height: 1000rpx;
		background: linear-gradient(#dadada, rgba(212, 212, 212, 0));
		font-size: 100rpx;
		margin-left: 5rpx;
	}
</style>
